<!-- 重点参数：iconStyle, iconLabel -->
<!doctype html>
<html lang="zh-CN">

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>车辆轨迹</title>
    <style>
    html,
    body,
    #container {
        width: 100%;
        height: 100%;
        margin: 0px;
    }

    .amap-marker-label {
        font-size: 13px;
        border: 1px solid orange;
        background: #fff;
        border-radius: 10px 0 0 0;
        color: #690441;
    }
    </style>
</head>

<body>
    <div id="container"></div>
    <script type="text/javascript" src='https://webapi.amap.com/maps?v=1.4.14&key=bed6b3d25e1bc2d6bf27a667425ade4c'></script>
    <!-- UI组件库 1.0 -->
	<script src="https://webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
	<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript">
    //创建地图
    var map = new AMap.Map('container', {
        resizeEnable: true, //是否监控地图容器尺寸变化
        zoom:11, //初始化地图层级
        center: [89.177995, 44.939548] //初始化地图中心点
    });

		$.getJSON('./mapdata.js', function (rs) {

			var geoCoords = rs;
			var pts = []
			for (var i = 0; i < geoCoords.length; i+=5) {
				var point = [geoCoords[i].geoCoord[0], geoCoords[i].geoCoord[1]];
				pts.push({
					name: "",
					lnglat: point
				})
			}

			AMapUI.load(['ui/misc/PathSimplifier', 'lib/$'], function(PathSimplifier, $) {

			var pathSimplifierIns = new PathSimplifier({
				zIndex: 100,
				//autoSetFitView:false,
				map: map, //所属的地图实例

				getPath: function(pathData, pathIndex) {

					var points = pathData.points,
						lnglatList = [];

					for (var i = 0, len = points.length; i < len; i++) {
						lnglatList.push(points[i].lnglat);
					}

					return lnglatList;
				},
				getHoverTitle: function(pathData, pathIndex, pointIndex) {

					if (pointIndex >= 0) {
						//point 
						return pathData.name + '，' + pathData.points[pointIndex].name;
					}

					return pathData.name + '，点数量' + pathData.points.length;
				},
				renderOptions: {

					renderAllPointsIfNumberBelow: 100 //绘制路线节点，如不需要可设置为-1
				}
			});

			window.pathSimplifierIns = pathSimplifierIns;

			//设置数据
			pathSimplifierIns.setData([{
				name: '路线0',
				points: pts
			}]);

			//选中路线0
			pathSimplifierIns.setSelectedPathIndex(0);

			// pathSimplifierIns.on('pointClick', function(e, info) {

			// 	console.log('Click: ' + info.pathData.points[info.pointIndex].name);
			// });
			});

			map.setFitView(pathSimplifierIns);
		});

    </script>
</body>

</html>